<template>
  <div>
    <span id="title"><b>成员管理</b></span>

    <div id="shaixuan_1">&nbsp;
      <i class="iconfont icon-shaixuan"></i>
      <span slot="title">筛选</span>
    </div>
    <div id="shaixuan_2">
      <div id="text">
        <font>姓名或手机号：</font>
      </div>
      <div id="input">
        <el-input v-model="input"
                  placeholder="请输入患者姓名或手机号"></el-input>
      </div>
      <div id="date">
        <font>角色：</font>
        <el-dropdown style="margin-right: 70px"
                     @command="roleMethod">
          <el-button type="info">
            {{ role }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,i) in roles"
                              :key="i"
                              :command="item">{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div id="button">
        <el-button type="primary"
                   @click="chose">筛选</el-button>
      </div>
    </div>

    <div id="data_1">&nbsp;
      <i class="iconfont icon-querylist"></i>
      <span>成员列表</span>
      <el-button type="primary"
                 id="add">新增成员</el-button>
    </div>
    <div id="data_2">

      <div id="data_2_2">
        <MembersData :users="users"></MembersData>
      </div>
      <div id="all">
        <input type="checkbox"
               id="checkall">全选
      </div>
      <el-button type="danger"
                 id="delall"
                 size="mini">批量删除</el-button>
      <div id="page">
        <el-pagination background
                       layout="prev, pager, next"
                       :total="100">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import MembersData from "./membersData.vue"
export default {
  name: "Departments",
  components: {
    MembersData
  },
  data () {
    let users = new Array();
    for (let i = 0; i < 10; i++) {
      users.push({
        time: '2020-02-07 21：00：00',
        name: '内科',
        hospitalname: '北京协和医院',
        level: '一级',
        uploader: '李四',
        status: '不显示'
      });
    }
    return {
      users,
      input: '',
      starttime: '',
      endtime: '',
      activeIndex: '0',
      value: '',
      roles: ["请选择角色", "管理员", "医生"],
      role: '请选择角色'
    };
  },
  methods: {
    chose: function () {
      let time = this.value;
      console.log(time[0]);
      console.log(time[1]);
      console.log(this.input);
      this.starttime = time[0];
      this.endtime = time[1];
    },
    handleSelect (key) {
      console.log(key);
    },
    roleMethod (role_name) {
      this.role = role_name;
    }
  }
}
</script>

<style scoped>
#title {
  font-size: 30px;
}
#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}
#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}
#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}

#data_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#data_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  height: 700px;
}

#data_2_2 {
  margin-top: 20px;
}

#all {
  margin-top: 40px;
  margin-left: 30px;
  float: left;
}
#delall {
  margin-top: 35px;
  margin-left: 30px;
  float: left;
}
#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}
#add {
  float: right;
  margin-top: 5px;
  margin-right: 50px;
}
</style>
